

// react 实现简单的留言板 
import {MyBtn} from "./MyBtn"
export default class TodoListOne extends Component{
  state = {
    comments:[
      {
          title:'Vue',
          content:"Vue 真的好简单啊..."
      },
      {
          title:'React',
          content:"React 难吗..."
      },
      {
          title:'小程序',
          content:"小程序 是主流 (uni-app) (Taro)"
      },
      {
          title:'Typescript',
          content:"Ts 真的很简单 至少是javascript升级版本 "
      }, 
      {
          title:'Javascript',
          content:"Javascript 原生JS YYDS ..."
      }
    ]
  }

  addComment=()=>{
    var title = this.title.value;
    var content = this.content.value
    if(title&&content){
      this.state.comments.push({
        title,
        content 
      })
      // this.state.comments.unshift({
      //   title,
      //   content 
      // })
      this.setState({
        comments:this.state.comments,
      })
      this.title.value = "";
      this.content.value = ""
    }else{
      alert("请输入数据")
    }
  }
  setCommeontOne=(l,i)=>{
    var content = window.prompt(l.title,l.content);
    if(content){
       l.content = content;
       this.state.comments.splice(i,1,l)
       this.setState({
         comments:this.state.comments 
       })
       this['item'+i].className = "bounce "
    }
  }
  delCommeontOne=(l,i)=>{
    this.state.comments.splice(i,1)
    this['item'+i].className = "zoomOut"
    setTimeout(()=>{
      this.setState({
        comments:this.state.comments
      })
      if(this['item'+i]){
        this['item'+i].className = " "
      }
    },1000)
  }
  render(){
    const {comments} = this.state
    return (
      <div>
        <h2>
          react 实现简单的留言板  -  one   - TodoListOne
        </h2>
        <div>
          <h4 style={{textAlign:"center"}}>展示留言 </h4>
          <div className="list">
            {
                comments.map((l,i)=>(
                  <div ref={el=>this['item'+i]=el}  className="item zoomIn" style={{ marginTop:15,border:'1px solid #eee',borderRadius:8,background:'pink',width:'92%'}} key={i}>
                      <p>序号: {i+1}</p>
                      <div className="col">
                      <p>标题: {l.title}</p>
                      </div>
                      <p>
                        内容: {l.content}
                      </p>
                      <div className="actions">
                      <button onClick={()=>this.delCommeontOne(l,i)}>删除</button>
                      <button onClick={()=>this.setCommeontOne(l,i)}>修改</button>
                      </div>
                  </div>
                ))
            }
          </div>
        </div>
        <div>
          <h4 style={{textAlign:"center"}}>添加留言 </h4>
          <p>
            <input type="text" placeholder="请输入标题" ref={el=>this.title=el}/>
          </p>
          <p>
            <input type="text" placeholder="请输入内容" ref={el=>this.content=el}/>
          </p>
          <MyBtn text={'提交留言'}  onClick={this.addComment} />
        </div>
      </div>
    )
  }
}

// a=>(a)
// a=>{ return  a }